import React, { Component, PropTypes } from 'react';

import './AboutButton.css';
import ModalDialog, { ButtonType } from './ModalDialog';
import Scroll from './Scroll';

const DEFAULT_BUTTON_TEXT = 'このサービスについて';
const DEFAULT_ABOUT_TEXT =
  <div className="aboutContent">
    <p>本サービスの診断機能は、国立がん研究センターが実施している研究（科学的根拠に基づく発がん性・がん予防効果の評価とがん予防ガイドライン提言に関する研究）の一環で、大規模長期疫学研究である多目的コホート研究（「多目的コホートに基づくがん予防など健康の維持・増進に役立つエビデンスの構築に関する研究」）の成果をもとに制作されたものです。</p>
    <ul>
      <li>
        <p>脳卒中・心筋梗塞リスクチェックは40～69歳の男女が対象となります。<br/>
          70～74歳の方は69歳として判定致します。尚、過去に脳卒中・心筋梗塞にかかったことのある方については、今回の結果は当てはまりません。</p>
      </li><li>
        <p>大腸がんリスクチェックは40～69歳の男性が対象となります。<br/>
          70～74歳の方は69歳として判定致します。尚、過去に大腸がんにかかったことのある方については、今回の結果は当てはまりません。</p>
      </li><li>
        <p>胃がんリスクチェックは40～69歳の男女が対象となります。<br/>
          70～74歳の方は69歳として判定致します。尚、過去にがんにかかったことのある方やヘリコバクター・ピロリの除菌治療（薬の服用による治療）を受けたことのある方については、今回の結果は当てはまりません。</p>
      </li><li>
        <p>健康習慣によるがんリスクチェックは45～74歳の男女が対象となります。<br/>
          40～44歳の方は45歳として判定致します。尚、過去にがんや糖尿病にかかったことのある方については、今回の結果は当てはまりません。</p>
      </li>
    </ul>
  </div>;

class AboutButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      openAboutDialog: false,
    };
  }

  // ボタン押下時の処理
  handleAbout() {
    // ダイアログを表示する
    this.setState({ openAboutDialog: true });
  }

  render() {
    const { buttonText = DEFAULT_BUTTON_TEXT, aboutText = DEFAULT_ABOUT_TEXT, style } = this.props;
    return (
      <div className="AboutButton" >
        <button className="about-button" type="button" onClick={this.handleAbout.bind(this)} style={style} >
          {buttonText}
        </button>
        <ModalDialog
          title="このサービスについて"
          buttonType={ButtonType.OK}
          open={this.state.openAboutDialog}
          onAction={() => {
            this.setState({ openAboutDialog: false });
          }}
        >
          <Scroll fixedHeight={300}>
            {aboutText}
          </Scroll>
        </ModalDialog>
      </div>
    );
  }
}

/*AboutButton.propTypes = {
  style: PropTypes.object,
};*/

AboutButton.defaultProps = {
  style: {},
};

export default AboutButton
